<template>
    <view :style="{ '--color': color, '--back-color': $common.hexToRgba(color, 0.1), '--back-colors': $common.hexToRgba(color, 0.8) }">
        <view class="Content" :style="windowHeigth">
            <view class="navBar" :style="navBarHeight">
                <view class="barBox" :style="navStyle">
                    <view class="BackBox" @click="$back()">
                        <view class="iconfont icon-fanhui black size32 bold500"></view>
                    </view>
                    <text class="ellipsis black size32 bold">全部推广视频</text>
                </view>
            </view>
            <view class="Wrapper">
                <view class="SearchBox">
                    <view class="iconfont icon-btn_search color_99 size42 p-left20 p-right20"></view>
                    <input type="text" confirm-type="search" @confirm="Search" @input="Input" class="queryText" v-model="queryText" placeholder="请输入品牌、商品名、货号..." />
                    <view class="searchBtn" @click="Search">搜索</view>
                </view>
                <view class="listBox">
                    <u-tabs :list="list" :lineColor="color" :itemStyle="itemStyle" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :current="current" @click="click"></u-tabs>
                </view>
            </view>

            <scroll-view scroll-y="true" type="custom" @scroll="scroll" :lower-threshold="100" @scrolltolower="scrolltolower" class="scrollView" :style="scrollStyle" v-if="pageData.length">
                <grid-view type="masonry" :cross-axis-count="2" :cross-axis-gap="8" :main-axis-gap="8">
                    <view class="list" v-for="(item, index) in pageData" :key="index">
                        <channel-video class="channelVideo" :feed-token="item.feed_token" :promoterShareLink="item.promoter_share_link" object-fit="cover"></channel-video>
                        <view class="product_name">{{ item.product_name }}</view>
                        <view class="priceBox">
                            <text class="color h6">￥</text>
                            <text class="color size32 bold500">{{ item.product_mini_price }}</text>
                            <text class="color size24 m-left10">{{ item.profitTitle }}</text>
                        </view>
                    </view>
                </grid-view>
            </scroll-view>
            <emptys v-else></emptys>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                top_config: '',
                queryText: '',
                list: [],
                current: 0,
                page: 1,
                limit: 10,
                id: 0,
                getMore: true,
                pageData: [],
                scrollTop: 0,
                scrollTopCope: 0
            };
        },
        onLoad() {
            this.getTalentList();
        },
        methods: {
            getTalentList() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getFeedList'
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.list = result;

                        if (result.length) this.id = result[0].id;
                        this.init();
                    });
            },
            init() {
                this.page = 1;
                this.getMore = true;
                this.scrollTop = this.scrollTopCope;
                this.pageData = [];
                this.getTalentFeedList();
            },
            getTalentFeedList() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getTalentFeedList',
                        data: {
                            id: this.id,
                            page: this.page,
                            limit: this.limit,
                            queryText: this.queryText
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.limit) this.getMore = false;
                    });
            },

            click(e) {
                this.current = e.index;
                this.id = e.id;
                this.init();
            },

            scroll(e) {
                let scrollTop = Math.floor(e.detail.scrollTop);
                this.scrollTopCope = scrollTop;
            },

            scrolltolower() {
                if (!this.getMore) return;
                this.page++;
                this.getTalentFeedList();
            },

            Search() {
                if (!this.queryText) return;
                this.init();
            },

            Input(e) {
                const value = e.detail.value;
                if (value == '') this.init();
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'System', 'navHeight', 'navWidth']),
            windowHeigth() {
                let H = this.System.windowHeight;
                return `height: ${H}px`;
            },
            navBarHeight() {
                let H = this.totalHeight + 10;
                return `height: ${H}px`;
            },
            navStyle() {
                return `width: ${this.navWidth}px; height: ${this.navHeight}px;margin-top:${this.System.statusBarHeight}px`;
            },
            activeStyle() {
                return {
                    color: '#000',
                    fontSize: '32rpx',
                    fontWeight: 500
                };
            },
            inactiveStyle() {
                return {
                    color: '#999',
                    fontSize: '30rpx'
                };
            },
            itemStyle() {
                return {
                    height: '40px'
                };
            },
            scrollStyle() {
                let H = this.System.windowHeight - this.totalHeight - 10 - 80;
                return `height: ${H}px`;
            }
        }
    };
</script>

<style>
    page {
        background-color: #f7f7f7;
    }
</style>
<style lang="scss" scoped>
    .navBar {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 2000000;
        background-image: linear-gradient(to top, #f7f7f7 0%, var(--back-color) 10%, var(--color) 100%);
        .barBox {
            display: flex;
            align-items: center;
            overflow: hidden;
            .BackBox {
                width: 80rpx;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .Wrapper {
        width: 710rpx;
        height: 80px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .SearchBox {
            width: 710rpx;
            height: 80rpx;
            background-color: #fff;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            .queryText {
                flex: 1;
                height: 100%;
                font-size: 26rpx;
                color: #000;
            }
            .searchBtn {
                width: 120rpx;
                height: 70%;
                background-color: var(--color);
                font-size: 28rpx;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
                margin-right: 10rpx;
            }
        }
        .listBox {
            width: 100%;
            height: 90rpx;
        }
    }
    .scrollView {
        width: 710rpx;
        margin: 0 auto;
        box-sizing: border-box;
        .list {
            background-color: #fff;
            display: flex;
            flex-direction: column;
            border-radius: 10rpx;
            overflow: hidden;
            padding-bottom: 20rpx;
            .channelVideo {
                width: 100%;
                height: 480rpx;
                border-radius: 10rpx 10rpx 0 0;
            }
            .product_name {
                padding: 14rpx 10rpx;
                color: #000;
                font-size: 28rpx;
                font-weight: 500;
            }
            .priceBox {
                width: 100%;
                padding: 0 10rpx;
                // font-family: cursive;
            }
        }
    }
</style>
